<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>小图世界-漫游天下-拼图游戏</title>
<link rel="icon" href="../image/pics_2.ico" type="image/x-icon" />
<link rel="shortcut icon" href="../image/pics_2.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="../css/slide.css"
	media="screen" />
<link rel="stylesheet" type="text/css" href="../css/page.css"
	media="screen" />
<link rel="stylesheet" type="text/css" href="../css/puzzle.css"
	media="screen" />
<link href="../css/imgbubbles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../js/slide.js"></script>
<script type="text/javascript" src="../js/jquery.timer.js"></script>
<script type="text/javascript" src="../js/imgbubbles.js"></script>

<script type="text/javascript">
	jQuery(document).ready(function($) {
		$('ul#squares').imgbubbles({
			factor : 2.5
		}) //add bubbles effect to UL id="squares"
	})
</script>


<script type="text/javascript">
	var preIndex = 1;
	var nextIndex = 2;
	$(document).ready(function() {
		//每1秒执行
		$('body').everyTime('5s', function() {
			switchIcon();
		});
	});

	function switchIcon() {
		$('#switch' + preIndex).attr('src', '../image/2.png');
		$('#switch' + nextIndex).attr('src', '../image/1.png');
		$('#headCase').attr('src', '../image/head_case00' + nextIndex + ".jpg");

		if (nextIndex == 4) {
			nextIndex = 1;
			preIndex = 4;
		} else {
			if (preIndex == 4) {
				preIndex = 1;
			} else {
				preIndex++;
			}
			nextIndex++;
		}
	}
</script>

<script type="text/javascript">
	var puzzleImages = [ '../image/entertainment/puzzle/puzzle-1.jpg',
			'../image/entertainment/puzzle/puzzle-2.jpg',
			'../image/entertainment/puzzle/puzzle-3.jpg',
			'../image/entertainment/puzzle/puzzle-4.jpg',
			'../image/entertainment/puzzle/puzzle-5.jpg',
			'../image/entertainment/puzzle/puzzle-6.jpg',
			'../image/entertainment/puzzle/puzzle-7.jpg',
			'../image/entertainment/puzzle/puzzle-8.jpg' ];
	var rows = 3;
	var cols = 4;
	var imageArray = new Array();
	var imageInUse = false;
	var puzzleContainer;
	var activeImageIndicator = false;
	var activeSquare = false;
	var squareArray = new Array();
	var emptySquare_x;
	var emptySquare_y;
	var colWidth;
	var rowHeight;
	var gameInProgress = false;
	var revealedImage = false;
	for ( var no = 0; no < puzzleImages.length; no++) {
		imageArray[no] = new Image();
		imageArray[no].src = puzzleImages[no];
	}
	function initPuzzle() {
		gameInProgress = false;
		var tmpInUse = imageInUse;
		imageInUse = imageArray[Math.floor(Math.random() * puzzleImages.length)];
		if (imageInUse == tmpInUse && puzzleImages.length > 1)
			initPuzzle();
		else {
			puzzleContainer = document.getElementById('puzzle_container');
			getImageWidth();
		}
	}
	function getImageWidth() {
		if (imageInUse.width > 0) {
			startPuzzle();
		} else {
			setTimeout('getImageWidth()', 100);
		}
	}
	function scramble() {
		gameInProgress = true;
		var currentRow = cols - 1;
		var currentCol = rows - 1;
		document.getElementById('revealedImage').style.display = 'none';
		for ( var no = 0; no < rows; no++) {
			for ( var no2 = 0; no2 < cols; no2++) {
				if (no < rows.length || no2 < cols.length) {
					var el = document
							.getElementById('square_' + no2 + '_' + no);
					if (el) {
						el.style.left = (no2 * colWidth) + (no2) + 'px';
						el.style.top = (no * rowHeight) + (no) + 'px';
					} else {
						initPuzzle();
						return;
					}
				}
			}
		}
		var lastPos = false;
		var countMoves = 0;
		while (countMoves < (50 * cols * rows)) {
			var dir = Math.floor(Math.random() * 4);
			var readyToMove = false;
			if (dir == 0 && currentRow > 0 && lastPos != 1) {
				currentRow = currentRow - 1;
				readyToMove = true;
			}
			if (dir == 1 && currentRow < (rows - 1) && lastPos != 0) {
				currentRow = currentRow + 1;
				readyToMove = true;
			}
			if (dir == 2 && currentCol > 0 && lastPos != 3) {
				currentCol = currentCol - 1;
				readyToMove = true;
			}
			if (dir == 3 && currentCol < (cols - 1) && lastPos != 2) {
				currentCol = currentCol + 1;
				readyToMove = true;
			}
			if (readyToMove) {
				activeSquare = document.getElementById('square_' + currentCol
						+ '_' + currentRow);
				moveImage(false, true);
				lastPos = dir;
				countMoves++;
			}
		}
		return;
	}
	function gameFinished() {
		var string = "";
		var squareWidth = colWidth + 1;
		var squareHeight = rowHeight + 1;
		var squareCounter = 0;
		var errorsFound = false;
		var correctSquares = 0;
		for ( var prop in squareArray) {
			var currentCol = squareCounter % cols;
			var currentRow = Math.floor(squareCounter / cols);
			var correctLeft = currentCol * squareWidth;
			var correctTop = currentRow * squareHeight;
			if (squareArray[prop].style.left.replace('px', '') != correctLeft
					|| squareArray[prop].style.top.replace('px', '') != correctTop) {
				//return;			
			} else {
				correctSquares++;
			}
			squareCounter++;
		}
		if (correctSquares == ((cols * rows) - 1)) {
			document.getElementById('messageDiv').innerHTML = '<h2>恭喜您！拼图成功！</h2>';
			gameInProgress = false;
			revealImage();
		} else {
			document.getElementById('messageDiv').innerHTML = 'Currently, you have '
					+ correctSquares
					+ ' out of '
					+ ((cols * rows) - 1)
					+ ' pieces placed correctly';
		}
	}
	var currentOpacity = 0;
	function revealImage() {
		if (currentOpacity == 100)
			currentOpacity = 0;
		var obj = document.getElementById('revealedImage');
		obj.style.display = 'block';
		currentOpacity = currentOpacity + 2;
		if (document.all) {
			obj.style.filter = 'alpha(opacity=' + currentOpacity + ')';
		} else {
			obj.style.opacity = currentOpacity / 100;
		}
		if (currentOpacity < 100)
			setTimeout('revealImage()', 10);
	}
	function displayActiveImage() {
		if (!gameInProgress)
			return;
		if (!activeImageIndicator) {
			activeImageIndicator = document.createElement('DIV');
			activeImageIndicator.className = 'activeImageIndicator';
			puzzleContainer.appendChild(activeImageIndicator);
			activeImageIndicator.onclick = moveImage;
		}
		activeImageIndicator.style.display = 'block';
		activeImageIndicator.style.left = this.offsetLeft + 'px';
		activeImageIndicator.style.top = this.offsetTop + 'px';
		activeImageIndicator.style.width = this.style.width;
		activeImageIndicator.style.height = this.style.height;
		activeImageIndicator.innerHTML = '<span></span>';
		activeSquare = this;
	}
	function moveImage(e, fromShuffleFunction) {
		if (!activeSquare)
			return;
		if (!gameInProgress && !fromShuffleFunction) {
			alert('You have to shuffle the cards first');
			return;
		}
		var currentLeft = activeSquare.style.left.replace('px', '') / 1;
		var currentTop = activeSquare.style.top.replace('px', '') / 1;
		var diffLeft = Math.round((currentLeft - emptySquare_x) / colWidth);
		var diffTop = Math.round((currentTop - emptySquare_y) / rowHeight);
		if (((diffLeft == -1 || diffLeft == 1) && diffTop == 0)
				|| ((diffTop == -1 || diffTop == 1) && diffLeft == 0)) {
			activeSquare.style.left = emptySquare_x + 'px';
			activeSquare.style.top = emptySquare_y + 'px';
			emptySquare_x = currentLeft;
			emptySquare_y = currentTop;
			activeSquare = false;
			if (activeImageIndicator)
				activeImageIndicator.style.display = 'none';
			if (!fromShuffleFunction)
				gameFinished();
		}
	}
	function startPuzzle() {
		puzzleContainer.innerHTML = '';
		var subDivs = puzzleContainer.getElementsByTagName('DIV');
		for ( var no = 0; no < subDivs.length; no++) {
			subDivs[no].parentNode.removeChild(subDivs[no]);
		}
		activeImageIndicator = false;
		squareArray.length = 0;
		if (document.getElementById('revealedImage')) {
			var obj = document.getElementById('revealedImage');
			obj.parentNode.removeChild(obj);
		}
		var revealedImage = document.createElement('DIV');
		revealedImage.style.display = 'none';
		revealedImage.id = 'revealedImage';
		;
		revealedImage.className = 'revealedImage';
		;
		var img = document.createElement('IMG');
		img.src = imageInUse.src;
		revealedImage.appendChild(img);
		puzzleContainer.appendChild(revealedImage);
		colWidth = Math.round(imageInUse.width / cols) - 1;
		rowHeight = Math.round(imageInUse.height / rows) - 1;
		puzzleContainer.style.width = colWidth * cols + (cols * 1) + 'px';
		puzzleContainer.style.height = rowHeight * rows + (rows * 1) + 'px';
		if (navigator.appVersion.indexOf('5.') >= 0
				&& navigator.userAgent.indexOf('MSIE') >= 0) {
			puzzleContainer.style.width = colWidth * cols + (cols * 1) + 20
					+ 'px';
			puzzleContainer.style.height = rowHeight * rows + (rows * 1) + 20
					+ 'px';
		}
		if (!revealedImage) {
			revealedImage = document.createElement('DIV');
			revealedImage.style.display = 'none';
			revealedImage.innerHTML = '';
		}
		for ( var no = 0; no < rows; no++) {
			for ( var no2 = 0; no2 < cols; no2++) {
				if (no2 == cols - 1 && no == rows - 1) {
					emptySquare_x = (no2 * colWidth) + (no2);
					emptySquare_y = (no * rowHeight) + (no);
					break;
				}
				var newDiv = document.createElement('DIV');
				newDiv.id = 'square_' + no2 + '_' + no;
				newDiv.onmouseover = displayActiveImage;
				newDiv.onclick = moveImage;
				newDiv.className = 'square';
				newDiv.style.width = colWidth + 'px';
				newDiv.style.height = rowHeight + 'px';
				newDiv.style.left = (no2 * colWidth) + (no2) + 'px';
				newDiv.style.top = (no * rowHeight) + (no) + 'px';
				newDiv.setAttribute('initPosition', (no2 * colWidth) + (no2)
						+ '_' + (no * rowHeight) + (no));
				var img = new Image();
				img.src = imageInUse.src;
				img.style.position = 'absolute';
				img.style.left = 0 - (no2 * colWidth) + 'px';
				img.style.top = 0 - (no * rowHeight) + 'px';
				newDiv.appendChild(img);
				puzzleContainer.appendChild(newDiv);
				squareArray.push(newDiv);
			}
		}
	}
	window.onload = initPuzzle;

	function onblur1(obj) {
		var no = obj.value.replace(/[^\d]/g, '');
		if (no / 1 < 3) {
			obj.value = '3';
			no = 3;
		}
		;
		cols = no;
	}

	function onblur2(obj) {
		var no = obj.value.replace(/[^\d]/g, '');
		if (no / 1 < 2) {
			obj.value = '2';
			no = 2;
		}
		;
		rows = no;
	}
</script>

</head>
<body id="main_body">

	<!-- Panel -->
	<div id="toppanel">
		<div id="panel">
			<div class="content clearfix">
				<div class="left">
					<h1>付款方式</h1>
				</div>

				<div class="left">
					<h1>条款申明</h1>
				</div>
				<div class="left right">
					<h1>&nbsp;</h1>
				</div>

			</div>
		</div>
		<!-- /login -->
		<!-- The tab on top -->
		<div class="tab">
			<ul class="pay-rule">
				<li class="left">&nbsp;</li>
				<li>您好!</li>
				<li class="sep">|</li>
				<li id="toggle"><a id="open" class="open" href="#">付款方式 |
						条款申明</a> <a id="close" style="display: none;" class="close" href="#">关闭</a>
				</li>
				<li class="right">&nbsp;</li>
			</ul>
		</div>
		<!-- / top -->
	</div>
	<!--panel -->

	<div class="container">
		<div class="head_div001">
			<table style="width: 980px; height: 100%;" cellspacing="0">
				<tr>
					<td height="74"><img src="../image/site_logo.gif" border="0"
						style="vertical-align: middle; margin-left: 20px;" /></td>
				</tr>
				<tr>
					<td>
						<div style="width: 570px; float: left">
							<div style="height: 45px;">&nbsp;</div>
							<table cellspacing="0"
								style="width: 570px; height: 122px; margin-left: 20px;">
								<tr>
									<td width="190" height="27"
										style="border-right: 1px dashed #666; font-size: 14px; font-weight: bold;">上传</td>
									<td width="190"
										style="border-right: 1px dashed #666; padding-left: 10px; padding-right: 10px; font-size: 14px; font-weight: bold;">发现</td>
									<td width="190"
										style="padding-left: 10px; padding-right: 10px; font-size: 14px; font-weight: bold;">分享</td>
								</tr>
								<tr>
									<td valign="top"
										style="border-right: 1px dashed #666; font-size: 14px; padding-right: 10px;">透過不同方法，將你的相片上
										載到 小图世界。 方法包括：網頁、移動裝置、 電郵或你最愛的相片處理應用 程式。</td>
									<td valign="top"
										style="border-right: 1px dashed #666; font-size: 14px; padding-left: 10px; padding-right: 10px;">透過回應和備註，與你的朋友保
										持聯絡並分享你的故事，兼可加 入豐富的資訊，例如標籤、位置 和人物。</td>
									<td valign="top"
										style="padding-left: 10px; padding-right: 10px; font-size: 14px">將你的相片上載到
										小图世界一次， 便可透過 Facebook、Twitter、電郵、 Blog 等輕鬆安全地分享這些相片。</td>

								</tr>
							</table>
						</div>
						<div style="width: 40px; float: left">&nbsp;</div>
						<div style="width: 351px; float: left;">
							<div style="height: 22px; margin-top: 4px;">
								<img src="../image/1.png" alt="" width="18" height="20"
									id="switch1" />&nbsp;<img src="../image/2.png" alt=""
									width="18" height="20" id="switch2" />&nbsp;<img
									src="../image/2.png" alt="" width="18" height="20" id="switch3" />&nbsp;<img
									src="../image/2.png" alt="" width="18" height="20" id="switch4" />&nbsp;
							</div>
							<div style="width: 351px; height: 132px;">
								<img src="../image/head_case001.jpg" width="351" height="132"
									border="0" id="headCase" />
							</div>
						</div></td>
				</tr>
				<tr>
					<td height="36"><table cellspacing="0"
							style="height: 20px; font-size: 16px; font-weight: bold; margin-top: 10px; margin-left: 20px">
							<tr>
								<td style="float: left;"><label style="cursor: pointer;"
									onclick="window.location.href='index.html'">首页</label>
								</td>
								<td style="float: left; width: 90px; text-align: center">|</td>
								<td style="float: left;"><label style="cursor: pointer;"
									onclick="window.location.href='record.html'">微图记录</label>
								</td>
								<td style="float: left; width: 90px; text-align: center">|</td>
								<td style="float: left;"><label style="cursor: pointer;"
									onclick="window.location.href='shadow.html'">画影赏析</label>
								</td>
								<td style="float: left; width: 90px;; text-align: center">|</td>
								<td style="float: left; color: #15ADFF">漫游天下</td>
								<td style="float: left; width: 90px; text-align: center">|</td>
								<td style="float: left;"><label style="cursor: pointer;"
									onclick="window.location.href='space.html'">我的空间</label>
								</td>
							</tr>
						</table></td>
				</tr>
			</table>

		</div>

		<div class="main_div001">
			<div style="margin-top: 20px; margin-left: 20px;">
				<div style="margin-left: 40px;">
					<ul id="squares" class="bubblewrap">
						<li><a href="puzzle.html"><img
								src="../image/icon/puzzle.png" alt="拼图游戏" /> </a></li>
						<li><a href="findImg.html"><img
								src="../image/icon/find.png" alt="找图游戏" /> </a></li>
						<li><a href="rememberImg.html"><img
								src="../image/icon/question.png" alt="记图游戏" /> </a></li>
						<li><a href="avoid.html"><img
								src="../image/icon/orbz_lightning.png" alt="闪躲游戏" /> </a></li>
						<li><a href="entertainment.html"><img
								src="../image/icon/back.png" alt="返回" /> </a></li>
					</ul>
				</div>
			</div>

			<div style="margin-top: 40px; width: 520px; margin-left: 230px;">

				<div style="margin-bottom: 5px;">
					<a href="#" onclick="scramble();return false">开始</a> | <a href="#"
						onclick="initPuzzle();return false">换一张图</a>
					<form style="display: inline">
						Columns/Rows: <input type="text" value="4" onblur="onblur1(this)"
							maxlength="1" size="2" /> × <input type="text" value="3"
							onblur="onblur2(this)" maxlength="1" size="2" />
					</form>
				</div>
				<div id="puzzle_container">请您稍等，正在初始化......</div>
				<div id="messageDiv"></div>
				<div style="clear: both;">
					<script type="text/javascript">
						var gaJsHost = (("https:" == document.location.protocol) ? "https://www.baidu.com"
								: "http://www.codefans.net");
						document
								.write(unescape("%3Cscript src='"
										+ gaJsHost
										+ "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
					</script>
					<script type="text/javascript">
						try {
							var pageTracker = _gat._getTracker("UA-1334907-4");
							pageTracker._trackPageview();
						} catch (err) {
						}
					</script>
				</div>
				<br />打开后请等待加载，因背景图较大，需要一定时间加载，你可以刷新页面试一下。

			</div>

		</div>



		<div class="foot_div001" style="padding-top: 5px;">
			<div style="width: 400px; float: left;">&nbsp;&nbsp;Copy@Right&nbsp;&nbsp;2012&nbsp;&nbsp;兔兔虎工作室</div>
			<div style="text-align: right; width: 580px; float: left">
				<a href="#">关于我们</a> | <a href="#">隐私政策</a> | <a href="#">服务条款</a> |<a
					href="#"> 联系我们</a>&nbsp;&nbsp;
			</div>
			<div style="clear: both;"></div>
		</div>
	</div>
</body>
</html>